<template>
  <div class="person">
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import { type PersonInter, type Persons } from '@/types';

// let person:PersonInter = {id:"asjdj01",name:"张三",age:17}
//泛型
// let personList: Array<PersonInter> = [
//自定义类型
let personList: Persons = [
  { id: "asjdj01", name: "张三", age: 17 },
  { id: "asjdj02", name: "李四", age: 18 },
  { id: "asjdj03", name: "王五", age: 19 }
]

</script>

<!-- scoped
      表示作用域只在本组件有用，
      不加的话 如果在父组件里有同名的类选择器，会渲染那个组件
-->
<style scoped>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>